<template>
	<view class="conterBox">
		<view class="backFFF">
			<view class="cont-box">
				<view class="infodetaHead">
					{{housingResources.title}}
				</view>
				<view class="infodetaCen">
					<span>作者名字:{{housingResources.author}}</span><span>{{housingResources.edit_time}}</span>
				</view>
				<view class="infodetaValue">
					<rich-text :nodes="question"></rich-text>
				</view>

			</view>

		</view>
		<view class="relation cont-box">
			<view class="codeCode"></view>
			<view class="relationHead">
				关联楼盘
			</view>
			<view class="relationValue djfa">
				<view class="relationIamge">
					<image :src="globalDataApi+properties.house_images" class="img"></image>
				</view>
				<view class="relationText">
					<view>
						{{properties.name}}
					</view>
					<view>
						{{properties.address}}
					</view>
					<view>
						在售
					</view>
					<view>
						起价{{properties.price}}
						<view class="relationTell">
							售楼热线
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ShareArticle relation cont-box djfa">
			<view class='m20r'>分享文章</view>
			<view class="ShareArticlecode"><image src="../../../static/codeImg/路径 769@2x.png" mode="widthFix" class="Shareimg"></image>
			<image src="../../../static/codeImg/路径 769@2x.png" mode="widthFix" class="Shareimg"></image></view>

		</view>
		<view class="relation cont-box signUp">
			<view class="signUpHread">
				独享会员团购优惠楼盘网购报名中
			</view>
			<view >
				<input type="text" class="signUpTable" placeholder="请输入您的姓名" placeholder-class="placeholStyle">
				<input type="text" class="signUpTable" placeholder="请输入您的电话" placeholder-class="placeholStyle">
				<input type="text" class="signUpTable" placeholder="请输入意向楼盘" placeholder-class="placeholStyle">
			</view>
			<view class="signUpCheck">
				<checkbox  class="chaneck"/><span>阅读并同意 <text style="color: #FF5500;">《用户服务协议》</text></span>
			</view>
			<view >
				<button class="signUpbutton">我要报名</button>
			</view>
		</view>
		<view class="relatedData relation cont-box djfa" v-for="(item,index) in newsList" :key="index">
			<view class="relatedDataLeft">
				<image :src="globalDataApi+item.image" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="relatedDataRight">
				<view >
					{{item.title}}
				</view>
				<view >
					{{item.city}}
				</view>
				<view >
					<span>作者名称:{{item.author}}</span><span>{{item.edit_time}}</span>
				</view>
			</view>
		</view>
		<view class="relation cont-box OnlineGonsultation" >
			<span>在线咨询</span>
		</view>
		<view class="cont-boxBootm"></view>
	</view>
</template>

<script>
	import {
		formatRichText
	} from "@/util.js"
	export default {

		data() {
			return {
				globalDataApi: 'http://zysj.oss-cn-guangzhou.aliyuncs.com/',
				question: "",
				id:"",
				housingResources:{},
				properties:{},
				newsList:[]
			}
		},
		onLoad(option) {
			console.log("----option----------",option);
			this.id=option.id
			this.getint()
		},
		methods: {
			getint() {
				this.$api('api/properties/newsInfo','GET',{
					id:this.id
				}).then(res=>{
					console.log("-12341------------",res.data);
					this.housingResources = res.data
					this.question = formatRichText(res.data.content)
					this.properties=res.data.properties
					this.newsList=res.data.news
				})
			}
		}
	}
</script>

<style>
	.conterBox {
		width: 750rpx;
		/* height: 100vh; */
		padding: 0;
		margin: 0;
		background: #F6F6F6;
		;
	}

	.cont-boxBootm {
		width: 100%;
		height: 50rpx;
	}

	.cont-box {
		width: 712rpx;
		margin: 0 auto;
	}

	.backFFF {
		width: 750rpx;
		background-color: #FFFFFF;
	}

	.infodetaHead {
		width: 712rpx;
		height: 88rpx;
		/* background: #FFFFFF; */
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		margin: 26rpx auto;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.infodetaCen {
		width: 700rpx;
		height: 34rpx;
		/* background: #FFFFFF; */
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 24rpx;
		color: #C1C0C0;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.infodetaCen span:last-child {
		margin-left: 160rpx;
	}

	.codeCode {
		width: 1rpx;
		height: 20rpx;
	}

	.infodetaValue {
		width: 700rpx;
		/* background: #FFFFFF; 	 */
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 28rpx;
		color: #1C1C1C;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-bottom: 40rpx;
	}

	.relation {
		margin: 22rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.relationHead {
		width: 128rpx;
		height: 44rpx;
		margin: 0 0 18rpx 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #31302E;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.djfa {
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: center;
	}

	.relationValue {
		width: 666rpx;
		height: 198rpx;
		margin: 0 auto;
	}

	.relationIamge {
		width: 264rpx;
		height: 198rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.relationText {
		width: 382rpx;
		height: 198rpx;
		margin-left: 20rpx;
		font-family: PingFang SC, PingFang SC;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.relationText view:nth-child(1) {
		font-weight: 500;
		font-size: 34rpx;
		color: #31302E;
		margin-top: 5rpx;
		margin-bottom: 6rpx;

	}

	.relationText view:nth-child(2) {
		font-weight: 400;
		font-size: 26rpx;
		color: #A6A6A6;
		margin-bottom: 14rpx;
	}

	.relationText view:nth-child(3) {
		width: 62rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		background: #FED2CE;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FF5500;
		margin-bottom: 18rpx;
	}

	.relationText view:nth-child(4) {
		font-weight: 600;
		font-size: 28rpx;
		color: #FF5500;
	}

	.relationText view:nth-child(4) view {
		float: right;
		width: 168rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #61C799;
		font-weight: 600;
		font-size: 28rpx;
		color: #25CA95;
		line-height: 48rpx;
		text-align: center;
		margin-top: -10rpx;
	}

	.img {
		width: 100%;
		height: 95%;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.m20r {
		margin-left: 20rpx;
	}

	.ShareArticle {
		width: 712rpx;
		height: 88rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #5E5D5B;
		line-height: 88rpx;
		text-align: left;
	}
	.ShareArticlecode{
		width: 80%;
	}
	.Shareimg {
		width: 45rpx;
		height: 45rpx;
		margin:30rpx  0 0 30rpx;
	}
	.signUp{
		width: 712rpx;
		/* height: 558rpx; */
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 26rpx 0;
	}
	.signUpHread{
		width: 480rpx;
		height: 44rpx;
		margin: 0 auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FF5500;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.signUpTable{
		width: 664rpx;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 16rpx auto 16rpx;
	}
	.placeholStyle{
		margin-left: 26rpx;
	}
	.signUpCheck{
		margin-left: 27rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #787878;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.chaneck{
		transform: scale(0.8,0.8);
	}
	.signUpbutton{
		width: 692rpx;
		height: 80rpx;
		margin-top: 22rpx;
		text-align: center;
		line-height: 80rpx;
		background: #FF5500;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.relatedData{
		width: 712rpx;
		height: 188rpx;
		background: #FFFFFF;
		margin: 20rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.relatedDataLeft{
		width: 194rpx;
		height: 152rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.relatedDataRight{
		width: 478rpx;
		height: 152rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		text-align: left;
		font-style: normal;
		text-transform: none;
		position: relative;
	}
	.relatedDataRight view:nth-child(1){
		font-size: 28rpx;
		color: #191816;
		margin-bottom: 6rpx;
		
	}
	.relatedDataRight view:nth-child(2){
		font-size: 22rpx;
		color: #979D9F;
		margin-bottom: 16rpx;
	}
	.relatedDataRight view:nth-child(3){
		position: absolute;
		bottom: 0;
		font-size: 22rpx;
		color: #979D9F;
	}
	.relatedDataRight view:nth-child(3) span:last-child{
		float: right;
		margin-left: 90rpx;
	}
	.OnlineGonsultation{
			width: 712rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #FF5500;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
	}
</style>
